import React from "react";
import "./App.css";
import { useDispatch, useSelector } from "react-redux";

import { State, actionACreators } from "./store/index";

function App() {
  const { additionNum, subtractionNum, restoreNum } = actionACreators;
  const dispatch = useDispatch();
  const num = useSelector((state: State) => state.operate);

  return (
    <div className="App">
      <h1>{num}</h1>
      <button
        onClick={() => {
          dispatch(additionNum(10));
        }}
      >
        增加
      </button>
      <button
        onClick={() => {
          dispatch(subtractionNum(10));
        }}
      >
        减少
      </button>
      <button
        onClick={() => {
          dispatch(restoreNum());
        }}
      >
        还原
      </button>
    </div>
  );
}

export default App;
